import React, { PropTypes, Component } from 'react'
import Drawer from 'material-ui/Drawer'
import MenuItem from 'material-ui/MenuItem'
import AppBar from 'material-ui/AppBar'
import IconButton from 'material-ui/IconButton'
import Dialog from 'material-ui/Dialog'
import TextField from 'material-ui/TextField'
import {List, ListItem} from 'material-ui/List'

class SiteDrawer extends Component {
 constructor(props, context) {
    super(props, context)
    this.state={
      diaglogSeoOpen:false,
      listCptOpen:true,
      drawerCptsOpen:false

    }
 }

/**
 * 处理显示侧边栏  
 * @return {diaglogSeoOpen} 继承自父组件 props
 */
 handleDrawerToggle(){
  this.props.handleDrawerToggle()
 }

/**
 * 打开站点SEO设置对话框  
 * @return {diaglogSeoOpen} 设置当前state
 */
 handleSeoDialogOpen(){
  this.setState({
    diaglogSeoOpen:true
  })
 }

 /**
 * 关闭站点SEO设置对话框  
 * @return {diaglogSeoOpen} 设置当前state
 */
 handleSeoDialogClose(){
  this.setState({
    diaglogSeoOpen:false
  })
 }

 /**
 * 组件列表显示切换   
 * @return {diaglogSeoOpen} 设置当前state
 */
  handleListCptToggle(){
  this.setState({
    listCptOpen:!this.state.listCptOpen
  })
 }

 /**
 * 组件列表显示切换   
 * @return {diaglogSeoOpen} 设置当前state
 */
  handleDrawerCptsToggle(){
  this.setState({
    drawerCptsOpen:!this.state.drawerCptsOpen
  })
 }

 /**
  * 添加一个component
  * @param {Array()} cpt [一个描述组件属性的array]
  */
 addComponent(cpt){
  this.props.actions.addComponent(cpt)
  this.handleDrawerCptsToggle()
 }



  render() {
    let { components,componentsList } =this.props

    return (
      <div>
       <Drawer
            key="site-drawer" 
            open={this.props.drawerOpen}>
          <AppBar title="全局设置"
                  iconElementLeft=
                  {
                    <IconButton iconClassName="fa fa-angle-left"
                                onClick={this.handleDrawerToggle.bind(this)}  />
                   }

          />


         <MenuItem primaryText="站点SEO设置" 
                   leftIcon={ <IconButton iconClassName="fa fa-cog" style={{padding:0}} />}
                   onTouchTap={this.handleSeoDialogOpen.bind(this)} 
          />

          <Dialog
              key='dialog-seo'
              title="站点SEO设置"
              modal={false}
              open={this.state.diaglogSeoOpen}
              onRequestClose={this.handleSeoDialogClose.bind(this)}
              >
            <TextField hintText="专题标题"
                       floatingLabelText="专题标题" /><br />
            <TextField hintText="专题描述"
              floatingLabelText="专题描述" /><br />
        </Dialog>
         <MenuItem primaryText="组件列表" 
                   leftIcon={ <IconButton iconClassName="fa fa-th" style={{padding:0}} />}
                   onTouchTap={this.handleListCptToggle.bind(this)} 
          />

       <List style={{paddingLeft:15}}
            open={this.state.listCptOpen}>
          {components.map((cpt)=>{
            return (
                <ListItem key={cpt.positionId} style={{color:'#2196f3'}} primaryText={cpt.cptName} rightIcon={<IconButton iconClassName="fa fa-gavel" style={{fontSize:'12px',padding:0}} />} />
              )
           })}
          <ListItem key="cpt-add" 
                    style={{color:'#FF4081'}} 
                    primaryText="添加一个新组件" 
                    rightIcon={<IconButton iconClassName="fa fa-plus" 
                                            style={{fontSize:'12px',padding:0}} />}
                    onTouchTap={this.handleDrawerCptsToggle.bind(this)}

          />
          <Drawer
            key="site-drawer" 
             width={200}
             open={this.state.drawerCptsOpen}>

            <MenuItem primaryText="组件列表" 
                      style={{color:'#FF4081'}}
                      onTouchTap={this.handleListCptToggle.bind(this)} 
            />
            {
              componentsList.map((cpt)=>{
                return (
                    <ListItem key={cpt.id}
                              leftIcon={<IconButton iconClassName="fa fa-plus" 
                                            style={{fontSize:'12px'}}
                                            tooltip={cpt.cptName}  />}
                              onClick={()=>{ this.addComponent(cpt)}}              >

                        <img src={cpt.logoSrc} 
                             style={{width:'100%'}}
                            />
                    </ListItem>
                    
                  )
              })
            }
          </Drawer>

        </List>
 
       </Drawer>
         
      </div>
    
     
    )
  }
}

SiteDrawer.propTypes = {
  handleDrawerToggle:PropTypes.func.isRequired,
  components:PropTypes.array.isRequired,
  componentsList:PropTypes.array.isRequired

}

export default SiteDrawer
